<template>
  <div></div>
</template>
 
<script>
let $ = window.go.GraphObject.make
export default {
  name: '',
  props: ['modelData'],
  data () {
    return {
      diagram: null
    }
  },
  watch: {
    modelData: function (val) {
      console.log(val)
      this.updateModel(val)
    }
  },
  mounted() {
    console.log(window.go)
    let self = this
    var graygrad = $(go.Brush, "Linear", { 0: "#F5F5F5", 1: "#F1F1F1" });
    var bluegrad = $(go.Brush, "Linear", { 0: "#CDDAF0", 1: "#91ADDD" });
    var yellowgrad = $(go.Brush, "Linear", { 0: "#FEC901", 1: "#FEA200" });
    var lavgrad = $(go.Brush, "Linear", { 0: "#EF9EFA", 1: "#A570AD" });
    let myDiagram =
        $(window.go.Diagram, this.$el)
    
    // but the ROOT node will be in both collections

    // define the Node template for non-terminal nodes
    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        { isShadowed: true },
        // define the node's outer shape
        $(go.Shape, "RoundedRectangle",
          { fill: graygrad, stroke: "#D8D8D8" },
          new go.Binding("fill", "color")),
        // define the node's text
        $(go.TextBlock,
          { margin: 5, font: "bold 11px Helvetica, bold Arial, sans-serif" },
          new go.Binding("text", "key"))
      );

    // define the Link template
    myDiagram.linkTemplate =
      $(go.Link,  // the whole link panel
        { selectable: false },
        $(go.Shape));  // the link shape
    this.diagram = myDiagram
    this.updateModel(this.modelData)
  },
  methods: {
    model: function () {
        return this.diagram.model
    },
    updateModel: function (val) {
        // No GoJS transaction permitted when replacing Diagram.model.
        if (val instanceof window.go.Model) {
            this.diagram.model = val
        } else {
            let m = new window.go.GraphLinksModel()
            if (val) {
                for (let p in val) {
                    m[p] = val[p]
                }
            }
            this.diagram.model = m
        }
    },
    updateDiagramFromData: function () {
      this.diagram.startTransaction("Double Tree Layout")
      
      // split the nodes and links into two Sets, depending on direction
      var leftParts = new go.Set(/*go.Part*/);
      var rightParts = new go.Set(/*go.Part*/);
      this.separatePartsByLayout(this.diagram, leftParts, rightParts);
      // create and perform two TreeLayouts, one in each direction,
      // without moving the ROOT node, on the different subsets of nodes and links
      var layout1 =
        $(go.TreeLayout,
          {
            angle: 180,
            arrangement: go.TreeLayout.ArrangementFixedRoots,
            setsPortSpot: false
          });

      var layout2 =
        $(go.TreeLayout,
          {
            angle: 0,
            arrangement: go.TreeLayout.ArrangementFixedRoots,
            setsPortSpot: false
          });

      layout1.doLayout(leftParts);
      layout2.doLayout(rightParts);

      // This is very general but very inefficient.
      // It would be better to modify the diagramData data by calling
      // Model.setDataProperty or Model.addNodeData, et al.
      // this.diagram.updateAllRelationshipsFromData()
      // this.diagram.updateAllTargetBindings()
      this.diagram.commitTransaction('Double Tree Layout')
    },
    separatePartsByLayout(diagram, leftParts, rightParts) {
      var root = diagram.findNodeForKey("Root");
      if (root === null) return;
      // the ROOT node is shared by both subtrees!
      leftParts.add(root);
      rightParts.add(root);
      // look at all of the immediate children of the ROOT node
      root.findTreeChildrenNodes().each(function(child) {
        // in what direction is this child growing?
        var dir = child.data.dir;
        var coll = (dir === "left") ? leftParts : rightParts;
        // add the whole subtree starting with this child node
        coll.addAll(child.findTreeParts());
        // and also add the link from the ROOT node to this child node
        coll.add(child.findTreeParentLink());
      });
    }
  }
}
</script>
 
<style scoped lang="less">
 
</style>